<template>
  <div class="accountManager">
    <!-- 信息展示 -->
    <div v-if="flag">
      <div>
        <div class="title">密码:</div>
        <div class="editPwd" @click="editPwd()">修改密码</div>
      </div>
      <div>
        <div class="title">手机号:</div>
        <div>
          {{ userInfo.mobile }} <Icon type="ios-link" title="修改" @click="editPhone()" />
        </div>
      </div>
      <div v-for="(i, index) in bindList" :key="index">
        <div class="title">{{ i.label }}:</div>
        <div>
          {{ i.isBind ? "已绑定" : "未绑定" }}
          <span v-if="i.isBind" @click="unBind(i)">解绑</span>
          <Icon v-else type="ios-link" title="绑定" @click="editBind(i.value)" />
        </div>
      </div>
    </div>
    <!-- 密码修改框 -->
    <div v-if="flagPwd">
      <div class="oldPwd">
        <div class="title">原密码:</div>
        <div>
          <input type="text" placeholder="请输入原密码" v-model="password" />
        </div>
      </div>
      <div class="newPwd">
        <div class="title">新密码:</div>
        <div>
          <input
            type="text"
            @blur="passwordChange"
            placeholder="请输入新密码"
            v-model="newPassword"
          />
        </div>
      </div>
      <div class="confirmNewPwd">
        <div class="title">确认新密码:</div>
        <div>
          <input
            @blur="passwordChange"
            type="text"
            placeholder="请再次输入新密码"
            v-model="newPassword2"
          />
        </div>
      </div>
      <div class="confirmNewPwd" style="color: #ff340a" v-if="valTextShow">
        <div class="title"></div>
        新密码和确认密码必须保持一致
      </div>
      <div class="edit">
        <button class="edit-btn" @click="setpwd()">保存</button>
        <button class="cancel-btn" @click="cancelPwd()">取消</button>
      </div>
    </div>
    <!-- 手机号修改 -->
    <div v-if="flagPhone">
      <div class="newPwd">
        <div class="title">新手机号:</div>
        <div>
          <input type="text" placeholder="请输入新手机号" v-model="phoneNum.mobile" />
        </div>
      </div>
      <div class="confirmNewPwd">
        <div class="title">验证码:</div>
        <div>
          <input
            type="text"
            placeholder="请输入验证码"
            v-model="phoneNum.code"
            style="width: calc(230 / 1920 * 100vw)"
          />
          <button class="code-btn" @click="getcode" :disabled="disabled">
            {{ time == 60 ? "获取验证码" : time }}
          </button>
        </div>
      </div>
      <div class="edit">
        <button class="edit-btn" @click="setPhone()">下一步</button>
        <button class="cancel-btn" @click="cancelPhone()">取消</button>
      </div>
    </div>
  </div>
</template>
<script>
import {
  setPwd,
  getCode,
  phone,
  getBindList,
  bindAccount,
  unBindAccount,
} from "@/api/set.js";

import * as RegExp from "@/plugins/RegExp.js";
import { md5 } from "@/plugins/md5.js";
export default {
  name: "accountManager",
  data() {
    return {
      flag: true, // 判断是否修改密码
      flagPwd: false, //修改密码框展示
      flagPhone: false, //修改手机号
      // 修改手机号
      phoneNum: {
        mobile: "",
        code: "",
      },
      bindList: [], // 绑定列表
      userInfo: {
        mobile: "",
      },
      password: "",
      newPassword: "",
      newPassword2: "",
      time: 60,
      disabled: false,
      valTextShow: false,
      codeTime: null,
    };
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    // 打开左侧菜单
    this.$store.commit("SET_PERLEFTMENUSHOW", true);
    let query = this.$route.query;
    if (query.unionId) {
      this.bind(query);
    } else {
      this.getBindInfo();
    }
  },
  methods: {
    // 获取绑定列表
    getBindInfo() {
      getBindList().then((res) => {
        console.log(res);
        if (res.success) {
          let list = [
            { label: "微信", value: "WECHAT", isBind: false },
            { label: "QQ", value: "QQ", isBind: false },
            { label: "微博", value: "WEIBO", isBind: false },
          ];
          console.log(list);
          list.forEach((i) => {
            i.isBind = res.result.some((a) => i.value == a);
          });
          console.log(list);
          this.bindList = list;
        }
      });
    },
    passwordChange() {
      if (this.newPassword != this.newPassword2) {
        this.valTextShow = true;
      } else {
        this.valTextShow = false;
      }
    },
    // 点击修改密码
    editPwd() {
      this.flag = false;
      this.flagPwd = true;
    },
    // 绑定第三方
    editBind(v) {
      localStorage.setItem("loginForm", "set");
      if (v == "QQ") {
        window.open(
          "https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&client_id=102028269&redirect_uri=https://buyer-api.westts.cn/buyer/passport/connect/connect/callback/QQ&state=2e73ea5f596f1180ad5289e699aec65c&scope=get_user_info",
          "_self"
        );
      }
      console.log(v);
    },
    // 绑定第三方账号
    bind(params) {
      let formdata = new FormData();
      formdata.append("unionID", params.unionId);
      formdata.append("type", params.type);
      bindAccount(formdata).then((res) => {
        if (res.success) {
          this.$Message.success("绑定成功");
          this.getBindInfo();
        }
      });
    },
    // 解绑第三方账号
    unBind(v) {
      this.$Modal.confirm({
        title: "解除绑定",
        content: `<p>确认取消绑定${v.label}吗</p>`,
        onOk: () => {
          let formdata = new FormData();
          formdata.append("type", v.value);
          unBindAccount(formdata).then((res) => {
            if (res.success) {
              this.$Message.success("解绑成功");
              this.getBindInfo();
            }
          });
        },
      });
    },
    // 确认修改密码
    setpwd() {
      if (!this.valTextShow) {
        let param = {
          password: md5(this.password),
          newPassword: md5(this.newPassword),
        };
        setPwd(param).then((res) => {
          if (res.code == 200) {
            this.$Message["success"]({
              background: true,
              content: "密码修改成功",
            });
            setTimeout(() => {
              this.flagPwd = false;
              this.flag = true;
            }, 2000);
          } else {
            this.$Message.error("密码修改失败");
          }
        });
      }
    },
    cancelPwd() {
      this.flag = true;
      this.flagPwd = false;
    },
    // 点击手机号后面图片
    editPhone() {
      this.flag = false;
      this.flagPhone = true;
      this.time = 60;
      clearInterval(this.codeTime);
    },
    // 获取手机验证码
    getcode() {
      if (!RegExp.mobile.test(this.phoneNum.mobile)) {
        this.$Message.error("请输入正确的手机号码");
        return;
      }

      getCode(this.phoneNum.mobile).then((res) => {
        if (res.success) {
          this.$Message.success("验证码已发送，请注意查收");
          this.disabled = true;
          this.codeTime = setInterval(() => {
            this.time--;
            if (this.time == 0) {
              this.disabled = false;
              clearInterval(this.codeTime);
              this.time = 60;
            }
          }, 1000);
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 确认修改手机号
    setPhone() {
      phone(this.phoneNum).then((res) => {
        // console.log(res);
        if (res.code === 200) {
          this.phoneNum = {
            mobile: "",
            code: "",
          };
          this.$Message.success("修改成功");
          this.getInfo();
          this.flag = true;
          this.flagPhone = false;
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    cancelPhone() {
      this.flag = true;
      this.flagPhone = false;
    },
  },
  components: {},
};
</script>
<style lang="scss" scoped>
.accountManager {
  width: calc(1650 / 1920 * 100vw);
  background: #fff;
  // position: absolute;
  // top: calc(288 / 1920 * 100vw);
  // left: calc(240 / 1920 * 100vw);
  padding: calc(10 / 1920 * 100vw) calc(40 / 1920 * 100vw) calc(40 / 1920 * 100vw);
  > div {
    > div {
      display: flex;
      align-items: center;
      margin-bottom: calc(10 / 1920 * 100vw);
      font-size: calc(16 / 1920 * 100vw);
      .title {
        width: calc(60 / 1920 * 100vw);
        margin-right: calc(30 / 1920 * 100vw);
      }
      > div {
        .ivu-icon {
          font-size: calc(20 / 1920 * 100vw);
          margin-left: calc(16 / 1920 * 100vw);
          padding: calc(2 / 1920 * 100vw);
          &:hover {
            cursor: pointer;
            color: #fd5151;
          }
        }
        span {
          margin-left: calc(16 / 1920 * 100vw);
          padding: calc(2 / 1920 * 100vw);
          &:hover {
            cursor: pointer;
            color: #fd5151;
            text-decoration: underline;
          }
        }
      }
      .editPwd {
        color: #fd5151;
        cursor: pointer;
      }
    }
  }
  .oldPwd,
  .newPwd,
  .confirmNewPwd {
    display: flex;
    align-items: center;
    .title {
      width: calc(100 / 1920 * 100vw);
      color: #1f1f1f;
    }
    input {
      height: calc(50 / 1920 * 100vw);
      padding-left: calc(10 / 1920 * 100vw);
    }
    .code-btn {
      text-align: center;
      border: none;
      width: calc(150 / 1920 * 100vw);
      height: calc(50 / 1920 * 100vw);
      line-height: calc(50 / 1920 * 100vw);
      box-sizing: border-box;
      background-color: #fd5151;
      color: #fff;
      margin-left: calc(20 / 1920 * 100vw);
      border-radius: calc(4 / 1920 * 100vw);
    }
  }
  .edit {
    .edit-btn {
      background: #fd5151;
      border-radius: calc(4 / 1920 * 100vw);
      font-size: calc(14 / 1920 * 100vw);
      padding: calc(6 / 1920 * 100vw) calc(25 / 1920 * 100vw);
      color: #ffffff;
      text-align: center;
      border: none;
      margin-left: calc(115 / 1920 * 100vw);
      margin-top: calc(35 / 1920 * 100vw);
    }
    .cancel-btn {
      background: #fff;
      border-radius: calc(4 / 1920 * 100vw);
      font-size: calc(14 / 1920 * 100vw);
      padding: calc(6 / 1920 * 100vw) calc(25 / 1920 * 100vw);
      color: #1f1f1f;
      text-align: center;
      border: 1px solid #f0f0f0;
      margin-left: calc(29 / 1920 * 100vw);
      margin-top: calc(35 / 1920 * 100vw);
    }
  }
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input {
    outline: none;
    width: calc(400 / 1920 * 100vw);
    height: calc(40 / 1920 * 100vw);
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: calc(4 / 1920 * 100vw);
    color: #9c9c9c;
  }
}
</style>
